<template>
    <div>
        <h1>房型管理--修改</h1>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">房型名称</td>
                    <td><input type="text" v-model="queryInfo.typeName"></td>
                </tr>

                <tr>
                    <td align="right">房型面积</td>
                    <td><input type="text" v-model="queryInfo.houseAres"></td>
                </tr>

                <tr>
                    <td align="right">价格</td>
                    <td><input type="text" v-model="queryInfo.price"></td>
                </tr>

                <tr>
                    <td align="right">是否有窗</td>
                    <td>
                        <input type="radio" name="isWindow" :value="1" v-model="queryInfo.isWindows">有
                        <input type="radio" name="isWindow" :value="0" v-model="queryInfo.isWindows">无
                    </td>
                </tr>

                <tr>
                    <td align="right">入住人数</td>
                    <td>
                        <select v-model="queryInfo.peopleNum">
                            <option :value="1">1</option>
                            <option :value="2">2</option>
                            <option :value="3">3</option>
                            <option :value="4">4</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td align="right">状态</td>
                    <td>
                        <input type="radio" name="status" :value="1" v-model="queryInfo.state">启用
                        <input type="radio" name="status" :value="0" v-model="queryInfo.state">禁用
                    </td>
                </tr>


                <tr>
                    <td align="right">图片</td>
                    <td>
                        <input type="file" @change="getphoto">
                        <img :src="queryInfo.photo" alt="" width="100px" height="100px">
                    </td>
                </tr>


                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="提交" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import axios from 'axios';
const router = useRouter()
const route = useRoute()


let queryInfo = reactive({
    id:route.query.id,
  typeName: '',
  houseAres: '',
  price: '',
  isWindows: 1,
  peopleNum: 1,
  state: 1,
  photo: '',
})

const getphoto = (e:any)=>{
    let file = e.target.files[0]
    let formdata = new FormData()
    formdata.append('file',file)
    axios
    .post('/api/Conner/GetPhoto',formdata)
    .then(res=>{
        console.log(res);
        queryInfo.photo = res.data
    })
    .catch(err=>{
        console.log(err);
    })
}

onMounted(()=>{
    getdata();
})


const getdata = ()=>{
    axios({
        url:'/api/HouseType/FanHouseType',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        console.log(res);
        queryInfo.typeName = res.data.typeName
        queryInfo.houseAres = res.data.houseAres
        queryInfo.price = res.data.price
        queryInfo.isWindows = res.data.isWindows
        queryInfo.peopleNum = res.data.peopleNum
        queryInfo.state = res.data.state
        queryInfo.photo = res.data.photo
    })
    .catch(err=>{
        console.log(err);
    })
}


const ok = ()=>{
    if(queryInfo.typeName == ''){
        alert('房型名称不能为空');
        return;
    }
    axios({
        url:'/api/HouseType/UpdHouseType',
        method:'put',
        data:queryInfo
    })
    .then(res=>{
        console.log(res);
            alert('修改成功');
            router.push('/housetypelist');
    })
    .catch(err=>{
        console.log(err);
    })
}



</script>

<style scoped>
h1{
    text-align: center;
}
</style>